<template>
	<view class="root">

		<view class="body">

			<view class="">
				<uni-forms :value="formData" ref="form" :rules="rules">
					<uni-group>
						<view style="margin-bottom: 15px;" class="">
							<text>1、学院信息</text>
						</view>

						<uni-forms-item required label="学号" name="stuId">
							<uni-easyinput type="text" v-model="stuId" disabled placeholder="请输入学号"></uni-easyinput>
						</uni-forms-item>

						<uni-forms-item required label="学院" name="xueyuan" :errorMessage="xueyuan_error">
							<picker mode="selector" :range="xueyuan_list" range-key="deptName" @change="xueyuaan_change($event.detail)">
								<view class="sel">
									<text>{{xueyuan_text}}</text>
									<image src="../../static/img/arrow-down-bold.png" mode=""></image>
								</view>
							</picker>
						</uni-forms-item>
						
						<uni-forms-item required name="level" label="年级">
							<uni-data-checkbox v-model="formData.level" :localdata="level" />
						</uni-forms-item>
						
						<uni-forms-item  v-show="false" name="deptId" >
							
						</uni-forms-item>

						<uni-forms-item required label="专业" name="major">
							<uni-easyinput  v-model="formData.major" placeholder="请输入专业名称" />
						</uni-forms-item>

						<uni-forms-item required label="班级(全称)" name="cla">
							<uni-easyinput type="text" v-model="formData.cla" placeholder="请输入班级(全称)"></uni-easyinput>
						</uni-forms-item>
						
						<uni-forms-item required label="宿舍号" name="dormitory">
							<uni-easyinput type="text" v-model="formData.dormitory" placeholder="请输入宿舍号"></uni-easyinput>
						</uni-forms-item>

					</uni-group>

					<uni-group>

						<view style="margin-bottom: 15px;" class="">
							<text>2、基本信息</text>
						</view>

						<!-- 列表渲染 -->
						<uni-forms-item required label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" confirmType="完成" />
						</uni-forms-item>

						<uni-forms-item required label="身份证号" name="sfId">
							<uni-easyinput type="text" v-model="formData.sfId" placeholder="请输入身份证号" confirmType="完成" />
						</uni-forms-item>

						<uni-forms-item required label="民族" name="nation">

							<picker mode="selector" :range="national" @change="nat_change($event.detail)">
								<view class="sel">
									<text>{{nat_text}}</text>
									<image src="../../static/img/arrow-down-bold.png" mode=""></image>
								</view>
							</picker>

						</uni-forms-item>



						<uni-forms-item required name="gender" label="性别">
							<uni-data-checkbox v-model="formData.gender" :localdata="gender" />
						</uni-forms-item>

			<!-- 			<uni-forms-item label="户口" required name="reg">
							<uni-data-checkbox v-model="formData.reg" :localdata="reg_list" />
						</uni-forms-item> -->

						<uni-forms-item label="联系电话" required name="tel">
							<uni-easyinput placeholder="请输入11位电话号码" v-model="formData.tel"></uni-easyinput>
						</uni-forms-item>
						
						<uni-forms-item required label="家庭人口数" name="popsNum" labelWidth="120">
							<uni-easyinput type="text" v-model="formData.popsNum"  maxlength="2"></uni-easyinput>
						</uni-forms-item>
											
						<uni-forms-item required label="家庭成员在学人数" name="learnsNum" labelWidth="120">
							<uni-easyinput type="text" v-model="formData.learnsNum"  maxlength="2"></uni-easyinput>
						</uni-forms-item>
											
						<uni-forms-item required label="赡养人口数" name="supportNum" labelWidth="120">
							<uni-easyinput placeholder="年龄70岁以上为赡养人口"  v-model="formData.supportNum"  maxlength="2">
							</uni-easyinput>
						</uni-forms-item>
											
						<uni-forms-item required label="家庭成员失业人数" name="nojobNum" labelWidth="120">
							<uni-easyinput type="text" v-model="formData.nojobNum" maxlength="2"></uni-easyinput>
						</uni-forms-item>
						<!-- <text style="color: #F43559;font-size: 15px;">填写了失业人数的请提供失业证复印件</text> -->

					</uni-group>

					<uni-group >
						<button type="primary" @click="submitForm">下一页(1/3)</button>
					</uni-group>



					<!-- <uni-forms-item label="年龄" name="age">
						<input type="text" v-model="formData.age" placeholder="请输入年龄" @input="binddata('age',$event.detail.value)" />
					</uni-forms-item>
					 -->

				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	var national = require("../../static/national.js");
	import {getXueyuanList, getKunnanInfo} from "@/api/kunnan.js"
	import {idNoValidator} from "@/utils/test.js"
	// 获取民族数组
	national = national.national;
	
	export default {
		data() {
			return {
				title: "基本信息",
				stuId:uni.getStorageSync('stuId') || '',
				input_text: '姓名',
				nat_text: '请选择',
				xueyuan_text: '请选择',
				xueyuan_list: [],
				reg_list: [{
						text: '农村',
						value: '农村'
					},
					{
						text: '城镇',
						value: '城镇'
					}
				],
				xueyuan_error: '',
				formData: {
					deptId:'',//部门id
					name: '',
					sfId: '',
					dormitory: '',
					// age: '',
					nation: '',
					xueyuan: '',
					level:'',
					major: '',
					cla: '',
					tel: '',
					reg: '',
					learnsNum: '',//家庭在学人数
					popsNum: '',//家庭人口数
					supportNum: '',//赡养人口数
					nojobNum: '',//失业人数
				},
				lists: [{
						item: 1,
						lable: '姓名',
						name: 'name',
						placeholder: '请输入姓名'
					},
					{
						item: 2,
						lable: '身份证号',
						name: 'id',
						placeholder: '请输入身份证号'
					},

				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]

					},
					sfId: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号'
							},
							{
								validateFunction:(rule,value,data,callback) =>{
									if(idNoValidator(value)){
										return true
									}
									else {
										callback('身份证号不正确')
									}
								}
							}
							
						]
					},
					// stuId: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入学号'
					// 		},
					// 		{
					// 			minLength: 10,
					// 			maxLength: 11,
					// 			errorMessage: '学号长度在{minLength}或{maxLength}个字符'
					// 		}
					// 	]
					// },
					dormitory: {
						rules: [{
							required: true,
							errorMessage: '请输入宿舍号'
						}]
					},
					classname: {
						rules: [{
							required: true,
							errorMessage: '请输入班级',

						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					},
					nation: {
						rules: [{
							required: true,
							errorMessage: '请选择民族'
						}]
					},
					// major: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择专业'
					// 	}]
					// },
					level: {
						rules: [{
							required: true,
							errorMessage: '请选择年级'
						}]
					},
					xueyuan: {
						rules: [{
							required: true,
							errorMessage: '请选择学院'
						}]
					},
					// reg: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择户口性质'
					// 	}]
					// },
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话'
						}, {
							minLength: 11,
							maxLength: 11,
							errorMessage: '号码输入长度错误'
						}]
					},
					cla:{
						rules:[{
							required: true,
							errorMessage: '请输入班级(全称)'
						}]
					},
					learnsNum: {
						rules: [{
								required: true,
								errorMessage: '请输入在学人数'
							},{
								format:'number',
								errorMessage: '在学人数必须为数字'
							}
						]
					},
					popsNum: {
						rules: [{
							required: true,
							errorMessage: '请输入家庭人口数'
						},
						{
							format:'number',
							errorMessage: '家庭人口数必须为数字'
						}]
					},
					supportNum: {
						rules: [{
							required: true,
							errorMessage: '请输入赡养人口数'
						},
						{
							format:'number',
							errorMessage: '赡养人口数必须为数字'
						}]
					},
					nojobNum: {
						rules: [{
							required: true,
							errorMessage: '请输入家庭成员失业人数'
						},
						{
							format:'number',
							errorMessage: '家庭成员失业人数必须为数字'
						}]
					},
				},
				gender: [{
						text: '男',
						value: '男'
					},
					{
						text: '女',
						value: '女'
					}
				],
				level: [
					{
						text: '2021级',
						value: '2021'
					},
					{
						text: '2022级',
						value: '2022'
					},
					{
						text: '2023级',
						value: '2023'
					},
					{
						
						text: '2024级',
						value: '2024'
						
					}
				],
				nat: ["1", "1"],
				national: national

			}
		},
		methods: {
			submitForm(form) {
				
				// 提交表单
				this.$refs.form.validate().then(res => {
					getApp().globalData.kunnan.kunnan = res
					uni.setStorage({
						key: 'kunnan_info',
						data: getApp().globalData.kunnan
					})
					uni.navigateTo({
						url: './familyInfo'
					});

				}).catch(err => {

					
					uni.showToast({
						icon:'error',
						title:err[0].errorMessage
					})
					// this.$data.errorMessage = res[0].errorMessage
					if (this.$data.formData.xueyuan == '') {
						this.$data.xueyuan_error = '请选择学院';
					}
					else {
						
					}
				})
			},

			// 当民族发生变化
			nat_change(even) {
				this.$data.nat_text = national[Number(even.value)];
				this.$data.formData.nation = national[Number(even.value)];

			},

			// 当学院发生变化
			xueyuaan_change(even) {
				this.$data.xueyuan_error = ' ';
				
				var xueyuan1 = this.xueyuan_list[even.value].deptName;
				
				this.$data.xueyuan_text = xueyuan1;
				this.$data.formData.xueyuan = xueyuan1;
				// 根据学院选择部门ID
				this.formData.deptId = this.xueyuan_list[even.value].deptId
			    // 清空数组
				// this.$data.major_list.splice(0);
				// this.$data.major_text = '请选择';
				// for (var i = 0; i < major.length; i++) {
				// 	if (major[i].xueyuan == xueyuan1) {
				// 		// console.log('');
				// 		for (var j = 0; j < major[i].list.length; j++) {
				// 			this.$data.major_list.push(major[i].list[j].major);
				// 		}
				// 		break;
				// 	}

				// }

			},

			// 当专业发生变化
			// major_change(even) {
			// 	this.$data.major_text = this.$data.major_list[Number(even.value)];
			// 	this.$data.formData.major = this.$data.major_list[Number(even.value)];
			// },

			// reg_chage(e) {
			// 	this.formData.reg = this.reg_list[e.detail.value]
			// 	this.reg_text = this.reg_list[e.detail.value]
			// }
		},
		// 载入
		onLoad: function() {
			
			getXueyuanList().then(data =>{
				let [err, res] = data
				this.xueyuan_list = res.data.rows
			})
			
			// 获取本地数据缓存
			uni.getStorage({
				key: 'kunnan_info',
				success: (res) => {
					getApp().globalData.kunnan = res.data
					if(res.data.kunnan != undefined){
						let kunnan = res.data.kunnan
						this.formData = kunnan
						this.xueyuan_text = kunnan.xueyuan
						this.major_text = kunnan.major
						this.nat_text = kunnan.nation
					}
				},
				// 本地数据不存在
				fail: () => {
	
					
						getKunnanInfo().then((data) =>{
							let [err, res] = data
							if(res.data.data){
								this.formData = res.data.data
								this.xueyuan_text = res.data.data.xueyuan
								this.major_text = res.data.data.major
								this.nat_text = res.data.data.nation
								res.data.data.material = JSON.parse(res.data.data.material)
								
								delete res.data.data?.familymId
								let kunnanInfo = {
									kunnan:res.data.data,
									familyInfo:res.data.data,
									autograph:res.data.data
								}
								getApp().globalData.kunnan = kunnanInfo
								uni.setStorageSync('kunnan_info',kunnanInfo)
							}
							
						})
					
				}
			})
		},
		onShow: function() {
			
		}
	}
</script>

<style>
	.sel {
		height: 36px;
		border: .6px solid #eee;
		border-radius: 4px;
		line-height: 36px;
		/* box-sizing: border-box; */
		padding-left: 10px;
		padding-right: 10px;
		color: rgb(128, 128, 128);
	}

	.sel image {
		float: right;
		width: 20px;
		height: 20px;
		margin-top: 8px;

	}

	.root {}

	* {
		margin: 0;
		padding: 0;
	}

	.header_top {
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		background-color: #3669f8;
		/* position: fixed; */
	}
</style>
